<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>5.条件渲染</title>
</head>

<body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        当 loading 为 true，渲染 正在加载中...
        当 loading 为 false，渲染 数据结果
      */
        //方法1

        //  //创建react 元素(当改动loading值时 判断语句会发生变化)
        //  const loading = true;
        // //定义element (先不赋值)
        //  let element;
        //  if(loading){
        //     element = <div>正在加载中...</div>
        //  }else{
        //     element = <div>数据结果</div>
        //  }

        //方法2

        //const element = <div>{loading?'正在加载中' : '数据结果'}</div>

        //方法3

        const element =loading && <div>正在加载中...</div>

        // 结论：
        // 一个或多个元素需要切换显示：条件渲染
        // 如果只是一个元素切换，可以使用 &&
        // 如果只是两个元素切换，可以三元表达式
        // 如果是三个元素以上切换，可以if & else-if & else
        // 渲染React元素
        ReactDOM.createRoot(document.getElementById('root')).render(element);

        </script>
</body>

</html>